前言
之前如果选择框架的话，都会毫无疑问的选择vue，但是来到这个公司之后，一直在研究原生，也没怎么使用框架。但是在研究原生的时候，发现曾经很神秘的框架，其实原生里就可以简单的实现。于是就想多学一两个框架，一是验证一下自己的想法，二是增强一下自己的个人竞争力。
初用
引入文件
React 一开始就被设计为逐步采用的方式，所以可以直接加到普通的 HTML 文件里
1
2
3
| <script src="../build/react.development.js"></script> // 这个是react的开发阶段的核心版本
<script src="../build/react-dom.development.js"></script> // 这个是react中提供dom相关操作的文件
<script src="../build/babel.min.js"></script> // 这个是可以将react的jsx语法转化为JavaScript的文件
|
调用
1
2
3
4
5
6
7
| <div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!222222222</h1>,
document.getElementById('example')
);
</script>
|
这里的 script 必须为 text/babel 类型，这样方便 babel 包转译。代码里的意思其实就是。将一段 HTML 扔给指定的元素内，然后进行渲染。
插入变量
这里就只贴关键代码，当然上面的 js 文件还是需要引入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div id="app"></div>
<script type="text/bable">
var dataArr = ["吃饭","睡觉","看电影"];
ReactDOM.render(
<div>
{
dataArr.map (function (name, index) {
return <div key={index}>现在在{name}!</div>
})
}
</div>,
document.getElementById("app")
)
</script>
|
这里其实是循环 datArr ，然后获得每一项，将每一项插入到 div 中，循环之后得到三个字符串类型的 div 然后将包裹三个字符串的大 div ，然后再将大盒子扔进总的盒子中，进行页面渲染
1
2
3
4
5
6
7
8
9
10
11
| <div id="app"></div>
<script type="text/babel">
var arr = [
<h1 key="1">Hello world!</h1>,
<h2 key="2">React is awesome</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('app')
);
</script>
|
这种其实跟上面的有异曲同工之处，只不过这个是直接将HTML的数组当做变量进行渲染。
评论加载中